<template>
  <div>
    <orderHeaderVue title="我的一天" :dataShow="false" :hideShow="false" />
    <div class="main_layout">
      <div class="client">
        <div class="card_item center">
          <div class="card_item_header">
            <div>{{ TimeData }} {{ month[WeekOne - 1] }}</div>
            <div @click="CreateThingsModel()">
              <PlusOutlined />
            </div>
          </div>
          <div class="card_item_main">
            <div
              class="item"
              v-for="(item, index) in Pagedata.arr"
              :key="index"
            >
                <template v-if="item.State == 0">
                  <div style="display: flex">
                    <a-radio
                      v-model:checked="item.State"
                      style="line-height: 60px"
                      @click="check(item.Id, item.State)"
                    >
                    </a-radio>
                    <a-tooltip>
                      <template #title>{{ item.Describe }}</template>
                      <div class="crad_hover" @click="EditThings(item)">
                      <div class="crad_info">
                        <div style="font-size: 16px">{{ item.Name }}</div>
                        <div style="font-size: 12px; color: #bebebe">
                          {{ item.StartDate }}
                        </div>
                      </div>
                      </div>
                    </a-tooltip>
                  </div>

                  <div @click="DeteleThings(item.Id)" style="color: red">
                    <CloseOutlined />
                  </div>
                </template>

                <template v-if="item.State == 1">
                  <div style="display: flex">
                    <a-radio
                      v-model:checked="item.State"
                      style="line-height: 60px"
                      @click="check(item.Id, item.State)"
                    >
                    </a-radio>
                    <a-tooltip>
                      <template #title>{{ item.Describe }}</template>
                      <div class="crad_info">
                        <div style="font-size: 16px">{{ item.Name }}</div>
                        <div style="font-size: 12px; color: #bebebe">
                          {{ item.StartDate }}
                        </div>
                      </div>
                    </a-tooltip>
                  </div>

                  <div @click="DeteleThings(item.Id)" style="color: red">
                    <CloseOutlined />
                  </div>
                </template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <a-modal v-model:visible="CreateModel" title="新建任务" @ok="AddOrder()">
      <a-form
        :model="formState"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item label="关联事项">
          <a-select
            v-model:value="formState.MattersId"
            size="Middle"
            style="width: 200px"
            :options="options.arr.data"
            :field-names="{ label: 'Name', value: 'Id' }"
            @change="handleChange"
          ></a-select>
        </a-form-item>
        <a-form-item label="任务起始时间">
          <a-date-picker
            show-time
            placeholder="任务起始时间"
            @change="onChange"
          />
        </a-form-item>
        <a-form-item label="任务描述">
          <a-input v-model:value="formState.Describe" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>

  <!-- 编辑弹窗 -->
  <a-modal v-model:visible="EditModel" title="编辑任务" @ok="EditThings()" okText='确定' cancelText='取消'>
    <a-form :model="EditState" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="事项名称">
        <a-input v-model:value="formState.Name" />
      </a-form-item>
      <a-form-item label="起始时间">
        <a-range-picker v-model:value="date" value-format="YYYY-MM-DD" :placeholder="[formState.StartDate, formState.EndDate]"/>
      </a-form-item>
      <a-form-item label="描述">
        <a-input v-model:value="formState.Describe" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import {
  PlusOutlined,
  LeftOutlined,
  RightOutlined,
  CloseOutlined,
} from "@ant-design/icons-vue";
import { queryday, getYMD } from "../utils/tools";
import orderHeaderVue from "../components/orderHeader.vue";
import { defineComponent, onMounted, reactive, ref } from "vue";
import { get, postJSON } from "../utils/request";
import { message } from "ant-design-vue";
export default defineComponent({
  components: {
    orderHeaderVue,
    RightOutlined,
    LeftOutlined,
    CloseOutlined,
    PlusOutlined,
  },
  setup() {
    let myDate = new Date();
    myDate.toLocaleDateString(); //获取当前日期
    myDate.setHours(0);
    myDate.setMinutes(0);
    myDate.setSeconds(0);
    myDate.setMilliseconds(0);

    const TimeData = getYMD(new Date()).TimeData;

    const WeekOne = queryday(myDate);
    const month = ["周天", "周一", "周二", "周三", "周四", "周五", "周六"];

    const CreateModel = ref(false);
    const Data = myDate.getTime();
    const formState = reactive({
      StartDate: "",
      MattersId: "",
      Describe: "",
      Name: "",
    });

    // 一天的数据
    var Pagedata = reactive({
      arr: [],
    });

    // 关联事项选择
    var options = reactive({
      arr: [],
    });

    onMounted(() => {
      let params = {
        myDate: Data,
      };

      // 获取关联事项下拉数据
      postJSON("/HasMatter", params).then((res) => {
        options.arr = res;
      });

      postJSON("/oneDay", params).then((res) => {
        Pagedata.arr = res.data;
      });
    });

    // 创建事项弹窗
    const CreateThingsModel = (ID) => {
      CreateModel.value = true;
    };

    // 新增订单
    const AddOrder = () => {
      let params = {
        ...formState,
        State: 0,
      };

      CreateModel.value = false;

      postJSON("/AddOrder", params).then((res) => {
        let params = {
          myDate: Data,
        };
        postJSON("/oneDay", params).then((res) => {
          Pagedata.arr = res.data;
        });
      });
    };

    const onChange = (value, dateString) => {
      formState.StartDate = dateString;
    };

    // 点击单选框
    const check = (id, status) => {
      let params = {
        Id: id,
        Stu: status,
      };
      postJSON("/setOrdersStu", params).then((res) => {
        let params = {
          myDate: Data,
        };
        postJSON("/oneDay", params).then((res) => {
          Pagedata.arr = res.data;
        });
      });
    };

    const handleChange = (value) => {
      for (let i = 0; i < options.arr.data.length; i++) {
        if (options.arr.data[i].Id == value) {
          formState.Name = options.arr.data[i].Name;
        }
      }
    };

    // 删除订单
    const DeteleThings = (ID) => {
      let params = {
        ID: ID,
      };

      postJSON("/DeleteOrders", params).then((res) => {
        message.info(res.msg);
        let params = {
          myDate: Data,
        };
        postJSON("/oneDay", params).then((res) => {
          Pagedata.arr = res.data;
        });
      });
    };

    // 编辑事项
    const EditModel = ref(false)

    const EditThings = (item) => {
      EditModel.value = true
      Object.keys(EditState).forEach(key)
      console.log(item);
    }

    const EditState = reactive({
      Duration:0;
      State:0;
      Id:'';
    })

    
    return {
      Data,
      formState,
      CreateModel,
      CreateThingsModel,
      onChange,
      AddOrder,
      options,
      labelCol: { style: { width: "150px" } },
      wrapperCol: { span: 14 },
      Pagedata,
      check,
      TimeData,
      WeekOne,
      month,
      handleChange,
      DeteleThings,
      EditThings,
      EditModel
    };
  },
});
</script>

<style lang="less" scoped>
.main_layout {
  height: calc(100vh - 120px);
  margin: 0 20px;
  overflow-x: hidden;
  .client {
    position: relative;
    height: 100%;
    min-width: 900px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    .card_item {
      width: 450px;
      position: relative;
      z-index: 2;
      /* 设置阴影 */
      box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
      border-radius: 15px;
      /* 设置card的背景色 */
      background: #ffffff;
      padding: 0 20px;
      margin: 5px;
      :deep(.ant-radio-inner::after) {
        content: " ";
        position: absolute;
        display: inline-block;
        border-radius: 0;
        width: 20px;
        height: 10px;
        border-width: 0 0 2px 2px;
        overflow: hidden;
        border-color: #1890ff;
        background: rgba(0, 0, 0, 0);
        border-style: solid;
        -webkit-transform: rotate(-50deg);
        transform: rotate(-50deg);
        left: 50%;
        top: 30%;
      }
      .card_item_header {
        color: #1890ff;
        height: 60px;
        line-height: 60px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 1px solid #e7e5e5;
      }
      .card_item_main {
        margin-top: 20px;
        .item {
          height:60px;
          line-height: 60px;
          display: flex;
          justify-content: space-between;
          .crad_info {
            line-height: 20px;
          }
          .crad_hover:hover {
            cursor: pointer; 
          }
        }
      }
    }
  }
}
</style>